<template>
    <div class="g6-dagre">
        <div id="container"/>
    </div>
</template>

<script lang="js">
import {defineComponent, onMounted} from "vue"
import G6 from '@antv/g6';
// import insertCss from 'insert-css';

export default defineComponent({
    name: "G6.dagre",
    setup() {
        onMounted(() => {
            // create ul
            const conextMenuContainer = document.createElement('ui');
            conextMenuContainer.id = 'contextMenu';
            conextMenuContainer.style = `z-index:999;display:none;position:absolute;border:1px solid red;background:green`
            // create li
            const firstLi = document.createElement('li');
            firstLi.innerText = 'Option 1';
            conextMenuContainer.appendChild(firstLi);

            const lastLi = document.createElement('li');
            lastLi.innerText = 'Option 2';
            conextMenuContainer.appendChild(lastLi);
            document.getElementById('container').appendChild(conextMenuContainer);

            const data = {
                nodes: [
                    {
                        id: '1',
                        dataType: 'alps',
                        label: 'alps_file1',
                        description: "这里是描述部分",
                    },
                    {
                        id: '2',
                        dataType: 'alps',
                        label: 'alps_file2',
                    },
                    {
                        id: '3',
                        dataType: 'alps',
                        label: 'alps_file3',
                    },
                    {
                        id: '4',
                        dataType: 'sql',
                        label: 'sql_file1',
                    },
                    {
                        id: '5',
                        dataType: 'sql',
                        label: 'sql_file2',
                    }
                ],
                edges: [
                    {
                        source: '1',
                        target: '2',
                    },
                    {
                        source: '1',
                        target: '3',
                    },
                    {
                        source: '2',
                        target: '4',
                    },
                    {
                        source: '3',
                        target: '4',
                    },
                    {
                        source: '4',
                        target: '5',
                    },
                ],
            };

            G6.registerNode(
                'sql',
                {
                    drawShape(cfg, group) {
                        const rect = group.addShape('rect', {
                            attrs: {
                                x: -75,
                                y: -25,
                                width: 150,
                                height: 50,
                                radius: 10,
                                stroke: '#5B8FF9',
                                fill: '#C6E5FF',
                                lineWidth: 3,
                            },
                            name: 'rect-shape',
                        });
                        if (cfg.name) {
                            group.addShape('text', {
                                attrs: {
                                    text: cfg.name,
                                    x: 0,
                                    y: 0,
                                    fill: '#00287E',
                                    fontSize: 14,
                                    textAlign: 'center',
                                    textBaseline: 'middle',
                                    fontWeight: 'bold',
                                },
                                name: 'text-shape',
                            });
                        }
                        return rect;
                    },
                },
                'single-node',
            );

            const container = document.getElementById('container');
            const width = container.scrollWidth;
            const height = container.scrollHeight || 600;
            const graph = new G6.Graph({
                container: 'container',
                width,
                height,
                layout: {
                    type: 'dagre',
                    rankdir: 'LR',
                    nodesepFunc: (d) => {
                        if (d.id === '3') {
                            return 500;
                        }
                        return 50;
                    },
                    ranksep: 70,
                    controlPoints: true,
                },
                defaultNode: {
                    // type: 'sql',
                    type: 'modelRect',
                    labelCfg: {
                        style: {
                            fill: '#9254de',
                            fontSize: 18,
                        },
                    },
                    descriptionCfg: {
                        style: {
                            fill: '#f00',
                        },
                    },
                    logoIcon: {
                        // 是否显示 icon，值为 false 则不渲染 icon
                        show: true,
                        x: 0,
                        y: 0,
                        // icon 的地址，字符串类型
                        img: 'https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg',
                        width: 16,
                        height: 16,
                        // 用于调整图标的左右位置
                        offset: 0
                    },
                    // 节点中表示状态的 icon 配置
                    stateIcon: {
                        // 是否显示 icon，值为 false 则不渲染 icon
                        show: true,
                        x: 0,
                        y: 0,
                        // icon 的地址，字符串类型
                        img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
                        width: 16,
                        height: 16,
                        // 用于调整图标的左右位置
                        offset: -5
                    }
                },
                defaultEdge: {
                    type: 'polyline',
                    style: {
                        radius: 20,
                        offset: 45,
                        endArrow: true,
                        lineWidth: 2,
                        stroke: '#C2C8D5',
                    },
                },
                nodeStateStyles: {
                    selected: {
                        stroke: '#d9d9d9',
                        fill: '#5394ef',
                    },
                },
                modes: {
                    default: [
                        'drag-canvas',
                        'zoom-canvas',
                        'click-select',
                        // {
                        //     type: 'tooltip',
                        //     formatText(model) {
                        //         const cfg = model.conf;
                        //         const text = [];
                        //         cfg.forEach((row) => {
                        //             text.push(row.label + ':' + row.value + '<br>');
                        //         });
                        //         return text.join('\n');
                        //     },
                        //     offset: 30,
                        // },
                    ],
                },
                fitView: true,
            });
            graph.data(data);
            graph.render();

            if (typeof window !== 'undefined')
                window.onresize = () => {
                    if (!graph || graph.get('destroyed')) return;
                    if (!container || !container.scrollWidth || !container.scrollHeight) return;
                    graph.changeSize(container.scrollWidth, container.scrollHeight);
                };

            graph.on('node:contextmenu', (ev) => {
                ev.preventDefault();
                ev.stopPropagation();
                conextMenuContainer.style.left = `${ev.clientX}px`;
                conextMenuContainer.style.top = `${ev.clientY}px`;
                conextMenuContainer.style.display = 'block'

            });

            graph.on('node:mouseleave', () => {
                conextMenuContainer.style.display = 'none';
            });
        })
    }
})
</script>

<style scoped lang="less">
.g6-dagre {
    width: 100%;
    height: 100%;
}
</style>
